<template>
  <div class="plot-container">
    <div class="person-container">
      <LeftMenu />
      <div class="plot-content">
        <el-card>
          <ManagementTitle>
            <template #title>小区管理</template>
          </ManagementTitle>

          <!-- 操作按钮区域 -->
          <div class="plot-header">
            <el-button type="primary" @click="handleAdd">
              <el-icon><Plus /></el-icon>
              新增小区
            </el-button>
          </div>

          <!-- 搜索区域 -->
          <div class="plot-search">
            <div class="search-row">
              <el-input
                v-model="searchForm.name"
                placeholder="请输入小区名称"
                style="width: 200px; margin-right: 12px"
                clearable
              />
              <el-select
                v-model="searchForm.countyId"
                placeholder="选择区域"
                style="width: 150px; margin-right: 12px"
                clearable
              >
                <el-option
                  v-for="county in countyList"
                  :key="county.id"
                  :label="county.name"
                  :value="county.id"
                />
              </el-select>
              <div class="rent-range-container">
                <span class="range-label">租金范围：</span>
                <el-input-number
                  v-model="searchForm.rentMin"
                  placeholder="最低租金"
                  :min="0"
                  :max="99999"
                  style="width: 120px; margin-right: 8px"
                  controls-position="right"
                />
                <span class="range-separator">-</span>
                <el-input-number
                  v-model="searchForm.rentMax"
                  placeholder="最高租金"
                  :min="0"
                  :max="99999"
                  style="width: 120px; margin-right: 12px"
                  controls-position="right"
                />
              </div>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </div>
          
          <!-- 小区卡片列表 -->
          <div class="plot-cards-container" style="margin-top: 16px;">
            <div v-if="loading" class="loading-state">
              <el-skeleton :rows="3" animated />
            </div>

            <div v-else-if="areaList.length > 0" class="plot-cards">
              <div
                v-for="plot in areaList"
                :key="plot.id"
                class="plot-card"
                :class="{ 'disabled': plot.delFlag === 1 }"
              >
                  <!-- 左侧图片 -->
                  <div class="plot-image">
                    <img
                      :src="getFirstImage(plot.ossUrls) || getDefaultImage()"
                      :alt="plot.name"
                      class="plot-img"
                      @error="handleImageError"
                    />
                    <div class="plot-status">
                      <span class="status-tag" :class="plot.delFlag === 0 ? 'active' : 'inactive'">
                        {{ plot.delFlag === 0 ? '正常' : '已删除' }}
                      </span>
                    </div>
                  </div>

                  <!-- 中间信息 -->
                  <div class="plot-info">
                    <div class="plot-header">
                      <h3 class="plot-title">{{ plot.name }}</h3>
                      <div class="plot-right">
                        <div class="plot-price" v-if="plot.rentMin && plot.rentMax">
                          <span class="price-range">{{ formatMoney(plot.rentMin) }}~{{ formatMoney(plot.rentMax) }}</span>
                          <span class="price-unit">元/月</span>
                        </div>

                      </div>
                    </div>

                    <div class="plot-details">
                      <div class="detail-item">
                        <span class="detail-label">项目位置：</span>
                        <span class="detail-value">{{ plot.address || '暂无' }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">所属区域：</span>
                        <span class="detail-value">{{ plot.countyName || '暂无' }}</span>
                      </div>
                      <div class="detail-item">
                        <span class="detail-label">主力户型：</span>
                        <span class="detail-value">{{ plot.type || '暂无' }}</span>
                      </div>
                      <div class="detail-item" v-if="plot.number">
                        <span class="detail-label">服务电话：</span>
                        <span class="detail-value">{{ plot.number }}</span>
                      </div>
                      <div class="detail-item" v-if="plot.listTime">
                        <span class="detail-label">开盘时间：</span>
                        <span class="detail-value">{{ formatDate(plot.listTime) }}</span>
                      </div>
                    </div>

                    <div class="plot-actions">
                      <el-button type="primary" @click="handleViewDetails(plot)">
                        详情
                      </el-button>
                      <el-button @click="handleEdit(plot)" :disabled="plot.delFlag === 1">
                        编辑
                      </el-button>
                      <el-button type="danger" @click="handleDelete(plot)" :disabled="plot.delFlag === 1">
                        删除
                      </el-button>
                    </div>
                  </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-else class="empty-state">
              <el-empty description="暂无小区数据">
                <el-button type="primary" @click="handleAdd">添加小区</el-button>
              </el-empty>
            </div>
          </div>

          <!-- 分页 -->
          <div class="table-pagination">
            <el-pagination
              background
              layout="total, prev, pager, next"
              :total="total"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>
    </div>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="800px"
      :before-close="handleDialogClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="120px"
        label-position="right"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="小区名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入小区名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域" prop="countyId">
              <el-select v-model="formData.countyId" placeholder="请选择区域" style="width: 100%">
                <el-option
                  v-for="county in countyList"
                  :key="county.id"
                  :label="county.name"
                  :value="county.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="主力户型" prop="type">
              <el-input v-model="formData.type" placeholder="如：1-3居室" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务电话" prop="number">
              <el-input v-model="formData.number" placeholder="请输入服务电话" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="项目地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入详细地址" />
        </el-form-item>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最低租金" prop="rentMin">
              <el-input-number
                v-model="formData.rentMin"
                :min="0"
                :precision="2"
                placeholder="最低租金"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最高租金" prop="rentMax">
              <el-input-number
                v-model="formData.rentMax"
                :min="0"
                :precision="2"
                placeholder="最高租金"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="房屋总数" prop="totalHouses">
              <el-input-number
                v-model="formData.totalHouses"
                :min="0"
                placeholder="房屋总数"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="楼栋总数" prop="totalBuildings">
              <el-input-number
                v-model="formData.totalBuildings"
                :min="0"
                placeholder="楼栋总数"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="开盘时间" prop="listTime">
          <el-date-picker
            v-model="formData.listTime"
            type="datetime"
            placeholder="选择开盘时间"
            style="width: 100%"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>

        <el-form-item label="配套设施" prop="assort">
          <el-input
            v-model="formData.assort"
            type="textarea"
            :rows="3"
            placeholder="请输入配套设施信息"
          />
        </el-form-item>

        <el-form-item label="项目简介" prop="brief">
          <el-input
            v-model="formData.brief"
            type="textarea"
            :rows="4"
            placeholder="请输入项目简介"
          />
        </el-form-item>

        <el-form-item label="小区图片">
          <div class="upload-container">
            <el-upload
              ref="uploadRef"
              :action="uploadUrl"
              :headers="uploadHeaders"
              :file-list="fileList"
              :on-success="handleUploadSuccess"
              :on-error="handleUploadError"
              :on-remove="handleRemove"
              :before-upload="beforeUpload"
              :limit="3"
              :on-exceed="handleExceed"
              list-type="picture-card"
              accept="image/*"
              name="file"
            >
              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <div class="upload-tip">
              <p>支持上传JPG、PNG格式图片，最多3张，每张不超过5MB</p>
            </div>
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleDialogClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            {{ isEdit ? '更新' : '保存' }}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import LeftMenu from "@/user/LeftMenu.vue";
import { ref, reactive, onMounted, computed } from "vue";
import ManagementTitle from "@/components/ManagementTitle.vue";
import { ElMessage, ElMessageBox, ElForm } from 'element-plus';
import { Plus, Delete, Download } from '@element-plus/icons-vue';
import axios from 'axios';
import type { County } from "@/types/formRulesInterface";

// 响应式数据
const loading = ref(false);
const areaList = ref<any[]>([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = 10;

const countyList = ref<County[]>([]);

// 搜索表单
const searchForm = reactive({
  name: '',
  countyId: null,
  rentMin: null,
  rentMax: null
});

// 对话框相关
const dialogVisible = ref(false);
const submitLoading = ref(false);
const isEdit = ref(false);
const formRef = ref<InstanceType<typeof ElForm>>();

// 表单数据
const formData = reactive({
  id: null,
  name: '',
  countyId: null,
  type: '',
  number: '',
  address: '',
  rentMin: null,
  rentMax: null,
  totalHouses: null,
  totalBuildings: null,
  listTime: '',
  assort: '',
  brief: '',
  ossUrls: ''
});

// 图片上传相关
const uploadRef = ref();
const fileList = ref<any[]>([]);
const uploadUrl = 'http://127.0.0.1:8080/oss/file/upload';
const uploadHeaders = {};

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入小区名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  countyId: [
    { required: true, message: '请选择所属区域', trigger: 'change' }
  ],
  address: [
    { required: true, message: '请输入项目地址', trigger: 'blur' }
  ],
  rentMin: [
    { type: 'number' as const, message: '请输入正确的金额', trigger: 'blur' }
  ],
  rentMax: [
    { type: 'number' as const, message: '请输入正确的金额', trigger: 'blur' }
  ]
};

// 计算属性
const dialogTitle = computed(() => {
  return isEdit.value ? '编辑小区' : '新增小区';
});

// 工具函数
const formatDate = (dateStr: string) => {
  if (!dateStr) return '暂无';
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

const formatMoney = (amount: number) => {
  if (!amount) return '0';
  return amount.toLocaleString('zh-CN');
};

const resetForm = () => {
  Object.assign(formData, {
    id: null,
    name: '',
    countyId: null,
    type: '',
    number: '',
    address: '',
    rentMin: null,
    rentMax: null,
    totalHouses: null,
    totalBuildings: null,
    listTime: '',
    assort: '',
    brief: '',
    ossUrls: ''
  });
  // 清空图片列表
  fileList.value = [];
  formRef.value?.clearValidate();
};

// API调用函数
const getAreaList = async () => {
  loading.value = true;
  try {
    const params: any = {
      page: currentPage.value,
      limit: pageSize
    };

    // 添加搜索条件
    if (searchForm.name && searchForm.name.trim()) {
      params.name = searchForm.name.trim();
    }
    if (searchForm.countyId) {
      params.countyId = searchForm.countyId;
    }
    if (searchForm.rentMin !== null && searchForm.rentMin !== undefined) {
      params.rentMin = searchForm.rentMin;
    }
    if (searchForm.rentMax !== null && searchForm.rentMax !== undefined) {
      params.rentMax = searchForm.rentMax;
    }

    const response = await axios.get('/rental/areaplot/page', {
      params,
      timeout: 10000,
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    });

    // 检查是否返回了HTML页面（代理失败）
    if (typeof response.data === 'string' && response.data.includes('<!DOCTYPE html>')) {
      // 尝试直接调用后端API
      const directResponse = await axios.get('http://127.0.0.1:8081/rental/areaplot/page', {
        params,
        timeout: 10000,
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      });

      if (directResponse.data.code === 0) {
        areaList.value = directResponse.data.data.list || [];
        total.value = directResponse.data.data.total || 0;
      } else {
        ElMessage.error(directResponse.data.msg || '获取小区列表失败');
      }
    } else if (response.data.code === 0) {
      areaList.value = response.data.data.list || [];
      total.value = response.data.data.total || 0;
    } else {
      ElMessage.error(response.data.msg || '获取小区列表失败');
    }
  } catch (error) {
    console.error('获取小区列表失败:', error);
    ElMessage.error('获取小区列表失败，请检查网络连接');
  } finally {
    loading.value = false;
  }
};

// 获取区域列表
const getCountyList = async () => {
  try {
    const response = await axios.get('/rental/areacounty/getAllCounty');
    if (response.data.code === 0) {
      countyList.value = response.data.data || [];
    }
  } catch (error) {
    console.error('获取区域列表失败:', error);
  }
};

// 保存小区
const savePlot = async (data: any) => {
  try {
    const response = await axios.post('/rental/areaplot', data);
    if (response.data.code === 0) {
      ElMessage.success('小区新增成功');
      return true;
    } else {
      ElMessage.error(response.data.msg || '新增失败');
      return false;
    }
  } catch (error) {
    console.error('新增小区失败:', error);
    ElMessage.error('新增失败，请检查网络连接');
    return false;
  }
};

// 更新小区
const updatePlot = async (data: any) => {
  try {
    const response = await axios.put('/rental/areaplot', data);
    if (response.data.code === 0) {
      ElMessage.success('小区更新成功');
      return true;
    } else {
      ElMessage.error(response.data.msg || '更新失败');
      return false;
    }
  } catch (error) {
    console.error('更新小区失败:', error);
    ElMessage.error('更新失败，请检查网络连接');
    return false;
  }
};

// 删除小区
const deletePlot = async (id: number) => {
  try {
    const response = await axios.delete(`/rental/areaplot/${id}`);
    if (response.data.code === 0) {
      ElMessage.success('小区删除成功');
      return true;
    } else {
      ElMessage.error(response.data.msg || '删除失败');
      return false;
    }
  } catch (error) {
    console.error('删除小区失败:', error);
    ElMessage.error('删除失败，请检查网络连接');
    return false;
  }
};



// 事件处理函数
const handleSearch = () => {
  currentPage.value = 1;
  getAreaList();
};

const handleReset = () => {
  searchForm.name = '';
  searchForm.countyId = null;
  searchForm.rentMin = null;
  searchForm.rentMax = null;
  currentPage.value = 1;
  getAreaList();
};

const handleCurrentChange = (page: number) => {
  currentPage.value = page;
  getAreaList();
};

// 移除了表格选择功能，不再需要这个函数

const handleAdd = () => {
  isEdit.value = false;
  resetForm();
  dialogVisible.value = true;
};

const handleEdit = (row: any) => {
  isEdit.value = true;

  // 设置表单数据
  Object.assign(formData, {
    id: row.id,
    name: row.name,
    countyId: row.countyId,
    type: row.type,
    number: row.number,
    address: row.address,
    rentMin: row.rentMin,
    rentMax: row.rentMax,
    totalHouses: row.totalHouses,
    totalBuildings: row.totalBuildings,
    listTime: row.listTime,
    assort: row.assort,
    brief: row.brief,
    ossUrls: row.ossUrls || ''
  });

  // 设置文件列表用于显示
  if (row.ossUrls && row.ossUrls.trim()) {
    const urls = row.ossUrls.split(',').filter((url: string) => url.trim());
    fileList.value = urls.map((url: string, index: number) => ({
      uid: Date.now() + index,
      name: `image-${index + 1}.jpg`,
      url: url.trim(),
      status: 'success'
    }));
  } else {
    fileList.value = [];
  }

  console.log('编辑小区，ossUrls:', formData.ossUrls);
  dialogVisible.value = true;
};

const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除小区"${row.name}"吗？`,
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );

    const success = await deletePlot(row.id);
    if (success) {
      getAreaList();
    }
  } catch {
    ElMessage.info('已取消删除');
  }
};



const handleDialogClose = () => {
  dialogVisible.value = false;
  resetForm();
};

// 图片上传相关函数
const beforeUpload = (file: File) => {
  const isImage = file.type.startsWith('image/');
  const isLt5M = file.size / 1024 / 1024 < 5;

  if (!isImage) {
    ElMessage.error('只能上传图片文件!');
    return false;
  }
  if (!isLt5M) {
    ElMessage.error('图片大小不能超过 5MB!');
    return false;
  }
  return true;
};

// 图片上传成功处理
const handleUploadSuccess = (response: any, file: any) => {
  if (response && response.code === 0 && response.data && response.data.url) {
    ElMessage.success('图片上传成功');

    // 直接将URL添加到formData.ossUrls中
    const currentUrls = formData.ossUrls ? formData.ossUrls.split(',').filter(url => url.trim()) : [];
    currentUrls.push(response.data.url);
    formData.ossUrls = currentUrls.join(',');

    console.log('图片上传成功，当前ossUrls:', formData.ossUrls);
  } else {
    ElMessage.error('图片上传失败');
    console.error('上传失败，响应:', response);
  }
};

// 图片上传失败处理
const handleUploadError = (error: any, file: any) => {
  console.error('上传失败:', error);
  ElMessage.error('图片上传失败，请重试');
};

// 移除图片处理
const handleRemove = (file: any) => {
  // 从ossUrls中移除对应的URL
  if (file.url && formData.ossUrls) {
    const urls = formData.ossUrls.split(',').filter(url => url.trim() !== file.url.trim());
    formData.ossUrls = urls.join(',');
    console.log('移除图片后，当前ossUrls:', formData.ossUrls);
  }
};

const handleExceed = () => {
  ElMessage.warning('最多只能上传3张图片');
};

// 获取第一张图片URL
const getFirstImage = (ossUrls: string) => {
  if (!ossUrls || !ossUrls.trim()) {
    return null; // 返回null，让模板使用默认图片
  }
  const urls = ossUrls.split(',').filter(url => url.trim());
  return urls.length > 0 ? urls[0].trim() : null;
};

// 获取默认图片
const getDefaultImage = () => {
  return '';
};

// 图片加载错误处理
const handleImageError = (event: any) => {
  event.target.src = getDefaultImage();
};

// 这个函数现在不需要了，因为我们直接在上传成功和移除时更新ossUrls
const updateOssUrls = () => {
  // 保留这个函数以防其他地方调用，但实际逻辑已经移到上传成功和移除处理中
  console.log('updateOssUrls被调用，当前ossUrls:', formData.ossUrls);
};

const handleSubmit = async () => {
  if (!formRef.value) return;

  try {
    await formRef.value.validate();
    submitLoading.value = true;

    console.log('提交表单，ossUrls:', formData.ossUrls);

    let success = false;
    if (isEdit.value) {
      success = await updatePlot(formData);
    } else {
      success = await savePlot(formData);
    }

    if (success) {
      dialogVisible.value = false;
      resetForm();
      getAreaList();
    }
  } catch (error) {
    console.error('表单验证失败:', error);
  } finally {
    submitLoading.value = false;
  }
};

// 其他操作方法
const handleViewDetails = (plot: any) => {
  // 跳转到楼栋列表页面，传递小区信息
  window.open(`/landlord/building/list?plotId=${plot.id}&plotName=${encodeURIComponent(plot.name)}&plotAddress=${encodeURIComponent(plot.address || '')}`, '_blank');
};

// 导出方法供模板使用
defineExpose({
  getFirstImage,
  getDefaultImage,
  handleImageError
});

// 初始化
onMounted(() => {
  getAreaList();
  getCountyList();
});
</script>

<style scoped>
.plot-container {
  display: flex;
  flex-direction: column;
}

.person-container {
  max-width: 1290px;
  width: 100%;
  margin: 20px auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0 16px;
}

.plot-content {
  margin-left: 10px;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.plot-header {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
}

.plot-search {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
}

.search-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.rent-range-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
}

.range-label {
  font-size: 14px;
  color: #606266;
  white-space: nowrap;
}

.range-separator {
  color: #909399;
  font-weight: 500;
}

.table-pagination {
  margin: 16px 0 0 0;
  display: flex;
  justify-content: flex-end;
}

:deep(.center-header) {
  text-align: center !important;
}

:deep(.el-card) {
  min-height: 831px;
}

:deep(.el-table th) {
  background: #f5f7fa !important;
}

:deep(.el-table .el-table__cell) {
  padding: 8px 0;
}

.house-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.house-count .selected {
  color: #409eff;
  font-weight: 600;
}

.house-count .total {
  color: #666;
}

.no-data {
  color: #999;
  font-style: italic;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

:deep(.el-dialog__body) {
  padding: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
}

:deep(.el-input-number) {
  width: 100%;
}

:deep(.el-date-editor) {
  width: 100%;
}

/* 图片上传样式 */
.upload-container {
  width: 100%;
}

.upload-tip {
  margin-top: 8px;
  color: #909399;
  font-size: 12px;
}

.upload-tip p {
  margin: 0;
}

:deep(.el-upload--picture-card) {
  width: 100px;
  height: 100px;
}

:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 100px;
  height: 100px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

@media (max-width: 900px) {
  .person-container {
    flex-direction: column;
    align-items: stretch;
    padding: 0 4px;
  }

  .plot-content {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }

  .plot-header {
    flex-direction: column;
    gap: 8px;
  }

  .search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .rent-range-container {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .plot-search .el-input,
  .plot-search .el-select,
  .plot-search .el-input-number {
    width: 100% !important;
  }

  :deep(.el-dialog) {
    width: 95% !important;
    margin: 0 auto;
  }

  :deep(.el-table .el-table__cell) {
    padding: 4px 0;
  }
}

/* 小区卡片样式 */
.plot-cards-container {
  min-height: 400px;
}

.plot-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.plot-card {
  display: flex;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid #e4e7ed;
  min-height: 160px;
}

.plot-card.disabled {
  opacity: 0.6;
}

.plot-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.plot-card.disabled {
  opacity: 0.6;
  background: #f5f7fa;
}

.plot-image {
  position: relative;
  width: 320px;
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
}

.plot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px 0 0 12px;
}

.plot-status {
  position: absolute;
  top: 12px;
  left: 12px;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.status-tag.active {
  background: #67c23a;
}

.status-tag.inactive {
  background: #f56c6c;
}

.plot-info {
  flex: 1;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.plot-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0px;
}

.plot-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}



.plot-title {
  font-size: 26px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.plot-price {
  text-align: right;
}

.price-range {
  font-size: 24px;
  font-weight: 600;
  color: #f56c6c;
}

.price-unit {
  font-size: 16px;
  color: #909399;
  margin-left: 4px;
}



.plot-details {
  flex: 1;
  margin-bottom: 2px;
  margin-top: 2px;
}

.detail-item {
  display: flex;
  margin-bottom: 3px;
  font-size: 16px;
  line-height: 1.4;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  color: #909399;
  min-width: 75px;
  flex-shrink: 0;
  font-size: 16px;
}

.detail-value {
  color: #606266;
  flex: 1;
  font-size: 16px;
  font-weight: 500;
}

.plot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}



.plot-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
  padding-top: 4px;
}



.loading-state {
  padding: 20px;
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
}

/* 卡片响应式设计 */
@media (max-width: 900px) {
  .plot-card {
    flex-direction: column;
  }

  .plot-image {
    width: 100%;
    height: 200px;
  }

  .plot-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .plot-price {
    text-align: left;
    margin-top: 8px;
  }

  .plot-bottom {
    flex-direction: column;
    gap: 12px;
  }



  .plot-actions {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>
